<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="./vue.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

    <div id="app">
        <!-- 声明式渲染 -->
        <h3>{{msg}}</h3>
        <input v-model="msg" type="text">
    </div>

    <script>
        // vue的特点：
        // 1. 声明式渲染(把数据显示在页面上)
        // 2. 数据驱动视图（心里先有数据，再有视图）
        // 3. 双向数据绑定
        ///   如果数据变化了，则页面就变化
        ///   如果页面变化了，则数据也会变化
        // 4. 组件化开发（类似于函数的提炼）
        console.log(Vue)
        const vm = new Vue({
            data: {
                msg: 'hi,vue123456'
            }
        }).$mount('#app')
        setInterval(function(){
            vm.msg = Date.now()
        }, 1000)
    </script>

</body>
</html>